<!--
    @description 服务活动查询 页面
    @author haoyang.ding
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :key="oneTableKey"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-api-config="apiConfig"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="true"
      :dynamic-is-show-select="false"
      :dynamic-is-init-table="true"
    />
    <serviceSearchDetail
      :popups-visible.sync="curPopupsVisible"
      :dynamic-edit-row-data="editRowData"
      :popups-state="editPopupsState"
      @close="close"
    />
  </div>
</template>

<script>
import OneTableTemplate from '@/components/templates/oneTable'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import api from '@/api/se/serviceActivities'

export default {
  name: 'ServiceSearch',
  components: {
    OneTableTemplate,
    ServiceSearchDetail: () => import('./edit')
  },
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    // 是否关闭弹窗
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },

  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])

    return {
      apiConfig: api.queryServiceActivityPages,

      curPopupsVisible: false,
      editRowData: {},

      tableButtons: [
        {
          compKey: 'btnKey0',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(1),
          text: '查询', // 查询
          name: 'search', // 按钮图标样式
          position: 'right'
        },
        {
          compKey: 'btnKey1',
          size: 'small',
          clickEvent: () => this.reset(),
          text: '重置', // 查询
          name: 'reset', // 按钮图标样式
          position: 'right'
        }
      ],

      tableComponents: [
        {
          compKey: 'compkey0',
          labelName: '活动编号：',
          codeField: 'actionCode',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          isMul: false
        },
        {
          compKey: 'compkey1',
          labelName: '活动主题：',
          codeField: 'actionName',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          isMul: false
        },
        {
          compKey: 'compkey2',
          labelName: '开始时间：',
          codeField: 'beginDate',
          component: () => import('@/components/org/datePicker/datePicker'),
          type: 'datePicker',
          isMust: true,
          isMul: false
        },
        {
          compKey: 'compKey3',
          labelName: '结束时间：',
          codeField: 'endDate',
          component: () => import('@/components/org/datePicker/datePicker'),
          type: 'datePicker',
          isMust: true,
          isMul: false
        },
        {
          compKey: 'compkey4',
          labelName: '状态：',
          codeField: 'actionState',
          // lookuptype: 'SE0058',
          component: () => import('@/components/org/LookupValue'),
          type: 'inputText',
          disabled: true,
          isMul: false,
          isMust: false
        },
        {
          compKey: 'compkey5',
          labelName: '活动类型：',
          codeField: 'actionTypeCode',
          lookuptype: 'SE1006',
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isMul: false,
          isMust: false
        },
        {
          compKey: 'compkey6',
          labelName: '发布人：',
          codeField: 'publisher',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: false,
          isMul: false
        },
        {
          compKey: 'compKey7',
          labelName: '发布时间：',
          codeField: 'publishDateStart,publishDateEnd',
          component: () => import('@/components/org/datePicker/datePicker'),
          dateType: 'daterange',
          isMul: false, // 多选状态
          isMust: false // 收起状态
        }
      ],

      tableCols: [
        {
          prop: 'controlBtn',
          label: '操作', // 操作
          codeField: 'orgName',
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'propKey0',
              align: 'center',
              labelName: '详情',
              codeField: 'orgName',
              clickEvent: (index) => this.edit(index),
              component: () => import('@/components/org/linkButton')
            }
          ]
        },
        {
          label: '客户活动',
          prop: 'actionCustDesc',
          hidden: true
        },
        {
          label: '服务活动ID',
          prop: 'actionId',
          hidden: true
        },
        {
          label: '活动编号',
          prop: 'actionCode',
          width: 140
        },
        {
          label: '活动主题',
          prop: 'actionName'
        },
        {
          label: '活动类型',
          prop: 'actionType',
          hidden: true
        },
        {
          label: '开始时间',
          prop: 'beginDate',
          width: 140
        },
        {
          label: '结束时间',
          prop: 'endDate',
          width: 140
        },
        {
          label: '状态',
          prop: 'actionState'
        },
        {
          label: '发布时间',
          prop: 'publishDate',
          width: 140
        },
        {
          label: '发布人',
          prop: 'publisher'
        },
        {
          label: '备注',
          prop: 'remark'
        }
      ],
      // 表单查询数据
      formField: this.$utils.getFormField(this, {
        actionCode: '',
        actionId: '',
        actionName: '',
        beginDate: '',
        endDate: '',
        actionStateCode: '',
        actionTypeCode: '',
        publisher: '',
        publishDateStart: '',
        publishDateEnd: '',
        actionState: '已启用'
      }, this.$ConfigCache.CacheConfig.cacheData[viewPageCode])
    }
  },
  mounted() {
    this.queryTable(1)
  },
  methods: {
    edit(index) {
      this.editRowData = this.$refs['multipleTable'].list[index]
      this.curPopupsVisible = true
      this.editPopupsState = 'edit'
    },
    close() {
      this.curPopupsVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
